<!--本页面由uniapp切片工具生成，uni-app切片-可视化设计工具(一套代码编译到7个平台iOS、Android、H5、小程序)，软件下载地址：http://www.ymznkf.com/new_view_669.htm -->
<template>
	<view class="content">
		<view class="msg_16">
			<!-- 评论消息按钮 -->
			<view class="msg_2">
				<view class="msg_12">
					<image v-on:click="toMyComment()" src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/fd249be1-8f63-4222-8b66-e4c2a6f1993a.jpg" mode="scaleToFill"
						border="0" class="icon"></image>
					<text decode="true" class="word">评论消息</text>
				</view>
				<view class="msg_13">
					<image v-on:click="toMyPost()" src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/5f3c9ade-062f-46c9-a826-dc6afc47b037.png" mode="scaleToFill" border="0"
						class="icon"></image>
					<text decode="true" class="word">我的帖子</text>
				</view>
				<view class="msg_14">
					<image v-on:click="toMyLike()" src="https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/5dbcb358-87ae-4537-a0e9-04999b792eff.jpg" mode="scaleToFill" border="0"
						class="icon"></image>
					<text decode="true" class="word">点赞消息</text>
				</view>
			</view>
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :collection="colList">
				<view v-if="error">{{error.message}}</view>
				<view v-else class="Messages">
					<view v-for="(item_Messages, index) in data" :key="index">
						<!-- 面板中的每条消息 -->
						<view class="row" @tap="toPost(item_Messages.post_id[0]._id,item_Messages.post_id[0].category_id,item_Messages._id)"> 
							<!-- 左侧：评论/点赞者的头像 -->
							<image v-on:click="icon_40_click(item_Messages)" v-if="!!item_Messages.initiator_id[0].avatar_file"
								:src="item_Messages.initiator_id[0].avatar_file.url" mode="scaleToFill" border="0" class="icon"></image>
							<view class="msg_41">
								<!-- 消息对应的帖子标题和时间戳 -->
								<view class="msg_42">
									<text decode="true" class="subject">{{item_Messages.post_id[0].title}}</text>
									<!--<u--text mode="date" size="5px" :text="item_Messages.timestamp"></u--text> 格式需要研究-->
									<text decode="true" class="time">{{item_Messages.timestamp}}</text>
								</view>
								<!-- 消息内容 - 根据消息类型显示 XXX点赞/评论了我 -->
								<view class="msg_43">
									<text v-if="item_Messages.type == 1" decode="true" class="smallTitle">{{item_Messages.initiator_id[0].nickname}}  点赞了我</text>
									<text v-else decode="true" class="smallTitle">{{item_Messages.initiator_id[0].nickname}}  评论了我</text>
									<text v-if="!item_Messages.isRead" decode="true" class="vote">{{1}}</text>
								</view>
							</view>
						</view>
					</view>
				</view> <!-- messege end-->
			</unicloud-db>
		</view>

		<view class="loading">{{loadingText}}</view>
		<view class="ymBbottom"></view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	// 引入 时间日期格式化显示函数
	import timeFrom from '@/tools/timeFrom.js'
	export default {
		data() {
			return {
				loadingText: '',
				// 以当前用户查询有关他的消息，同时与post表关联得到帖子的标题
				colList: [
					db.collection("NeuHelper-Notifications").where("toNotify_id == $cloudEnv_uid").getTemp(),
					db.collection('NeuHelper-Posts').field('_id, title, category_id').getTemp(),
					db.collection("uni-id-users").field('_id as ruser_id, nickname, avatar_file').getTemp()
				]
			};
		},
		// 4.13顶部下拉事件
		onPullDownRefresh() {
			this.$refs.udb.loadData({
					clear: true
				}, () => {
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				})
		},
		// 过滤器
		filters: {
			/**
			 * 时间戳 转换为 多久之前/年月日字符串
			 * @param {string} timeDate "timestamp" from DB
			 */
			timeFormat(timeDate) {
				console.log("bug")
				console.log(timeDate)
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			}
		},
		methods: {
			/**
			 * 跳转到我帖子的评论消息页面
			 */
			toMyComment() {
				uni.navigateTo({
					url: '/subpages/myComment/myComment',
					animationType: 'auto'
				})
			},
			/**
			 * 跳转到我帖子的点赞消息页面
			 */
			toMyLike() {
				uni.navigateTo({
					url: '/subpages/myLike/myLike',
					animationType: 'auto'
				})
			},
			/**
			 * 跳转到我发布的帖子页面
			 */
			toMyPost() {
				uni.navigateTo({
					url: '/subpages/myPost/myPost',
					animationType: 'auto'
				})
			},
			/** 
			 * 跳转到消息中心页面中对应的页面
			 * @param {string} post_id
			 * @param {string} post_category_id
			 * @param {string} NeuHelper_Notifications_id
			 */
			async toPost(post_id, post_category_id, NeuHelper_Notifications_id){
				// 点击之后先将未读状态改为已读
				try{
					await db.collection("NeuHelper-Notifications").where("_id=='" + NeuHelper_Notifications_id  + "'").update({'isRead':true})
				}catch (e) {
					uni.showModal({
						title: '提示',
						content: e.message
					})
				}
				uni.navigateTo({
					url: `/pages/list/detail?postId=${post_id}&catId=${post_category_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './msg.scss'
</style>